<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--  - 创建了2个组件实例，这两个组件不共享同个data对象，因为data是一个函数，每次调用
            data函数，会return一个新的对象
        - 如果data不是一个函数，而是一个对象data：{counter：1}，data里保存的是对象的内存地址。那组件实例每次调用都是指向同一个对象，
            这样页面上，你修改计数器1的时候计数器2上的数据也会被修改-->
  <cpn1></cpn1>
  <cpn1></cpn1>
</div>

<!--组件模板 注意：子组件如果包含多行代码，要包含在一个根元素里面（比如：div里面），要不然会报错-->
<template id="cpn">
  <div>
    <h2>当前计数：{{counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="subCounter">-</button>
  </div>
  
</template>

<script src="../js/vue.js"></script>
<script>
  const obj5={
    counter:1
  }
  //注册全局组件
  Vue.component('cpn1',{
    template:'#cpn',
    /*data(){
      return {
        counter:1
      }
    },*/
    //这样写就可以达到修改计数器1同时连锁修改计数器2上的数据的效果
    data(){
      return obj5;
    },
    methods:{
      addCounter(){
        this.counter++;
      },
      subCounter(){
        this.counter--;
      }
    }
  })
  
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
  })
  
  // 1.函数运行两次，返回两个对象，
  function abc(){
    return{
      name:'axu',
      age:30  // 返回一个对象
    }
  }
  let obj1=abc(); //obj1里面保存的是函数返回的对象的内存地址， 返回两个对象，每个对象的内存地址不同，即obj1和boj2保存的内存地址不同
  let obj2=abc();
  obj1.name='laoWen';
  console.log(obj2.name); //axu
  console.log(obj1===obj2) //false
  
  //2. 这样写，函数运行两次，返回的是同一个对象，即返回的是同一个内存地址
  const obj={
    name:'abc'
  }
  function aaa(){
    return obj; //返回一个obj，常量obj里面保存的是对象的内存地址，即返回对象的内存地址
  }
  let obj3=aaa(); // 把返回对象的内存地址赋值给obj3和obj4。 都是同一个内存地址，所以obj3和obj4保存的内存地址是指向同一个对象的
  let obj4=aaa();

  console.log(obj3===obj4)//true
  
</script>
</body>
</html>